import React, { useState } from "react";
import { Flex } from "antd";
import { CloseCircleOutlined } from "@ant-design/icons"

import { getEnv } from "@/constants";
import ProAutoScrollbars from "vendor/components/pro-autoScrollbars";
import ProCard from "vendor/components/pro-card";
import { BasePlayer } from "vendor/components/pro-jessibuca/BasePlayer";

import Header from "./Header";

/*
视频流测试web地址:
http://170.16.0.158:8000/yaws_web/app/videoPlayground

视频流格式:
ws://202.85.223.176:8081/rtp/设备号_通道号.live.flv
例如: ws://202.85.223.176:8081/rtp/34020000001110000001_34020000001320000011.live.flv
*/

const VideoPlayground: React.FC = () => {
  const staticPublicPath = getEnv().staticPublicPath
  const { playUrlList, addPlayUrl, delPlayUrl } = useVideoPlayground();

  return <div className="h-full flex flex-col">
    <Header addPlayUrl={addPlayUrl} />
    <div className="grow h-0">
      <ProAutoScrollbars>
        <Flex wrap="wrap" gap="0.6%">
          {playUrlList.map((playUrl, index) => (
            <ProCard
              key={index}
              title={index + 1}
              style={{ width: "24.5%", height: 250, marginTop: 8 }}
              extra={<CloseCircleOutlined className="cursor-pointer" title="删除" onClick={() => delPlayUrl(index)} />}
            >
              <BasePlayer
                playUrl={playUrl}
                config={{
                  decoder: `${staticPublicPath}/jessibuca/base/decoder.js`,
                  controlAutoHide: false,
                }}
              />
            </ProCard>
          ))}
        </Flex>
      </ProAutoScrollbars>
    </div>
  </div>
}

export default VideoPlayground;

const useVideoPlayground = () => {
  // const testUrl = "wss://170.16.0.21:2020/proxy/ipCameraVideoCollection/mediaServer/live/97.live.flv?sk_secret=24966a0753a57d7c5bc33298b64cc5b5"
  // const testUrl = "ws://202.85.223.176:8081/rtp/34020000001110000001_34020000001320000011.live.flv"
  // const testUrl = "ws://202.85.223.176:8081/rtp/34020000001110000001_34020000001320000012.live.flv"
  const [playUrlList, setPlayUrlList] = useState<string[]>([]);

  const addPlayUrl = (playUrl: string) => setPlayUrlList([...playUrlList, playUrl]);

  const delPlayUrl = (index: number) => {
    const newPlayUrlList = playUrlList.slice();
    newPlayUrlList.splice(index, 1);
    setPlayUrlList(newPlayUrlList);
  }

  return { playUrlList, addPlayUrl, delPlayUrl }
}
